<template>
  <div>
    <el-form ref="formRef" label-width="100px">
      <el-form-item label="总杆冠军图文">
        <div class="img-box">
          <el-image :src="model.openingText" style="width:100px" fit="cover" />
          <simpleCropper :ratio="0" :img.sync="model.openingText">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
            >点击上传</el-button>
          </simpleCropper>
        </div>
      </el-form-item>
      <el-form-item label="净杆冠军">
        <el-input v-model="model.netBarChampion" size="mini" />
      </el-form-item>
      <el-form-item label="总杆亚军">
        <el-input v-model="model.totalRunnersUp" size="mini" />
      </el-form-item>
      <el-form-item label="净杆亚军">
        <el-input v-model="model.netBarRunnersUp" size="mini" />
      </el-form-item>
      <el-form-item label="总杆季军">
        <el-input v-model="model.totalPoleBronze" size="mini" />
      </el-form-item>
      <el-form-item label="净杆季军">
        <el-input v-model="model.netBarPoleBronze" size="mini" />
      </el-form-item>
      <el-form-item>
        <el-button type="success" size="mini" @click="confirm">保 存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import simpleCropper from '@/components/SimpleCropper'
export default {
  components: {
    simpleCropper
  },
  props: {
    id: {
      type: Number,
      default: Number
    }
  },
  data() {
    return {
      // 当前选中的赛区id
      // competitionMonth: '',
      // 根据月份查询有什么赛区
      // selectAreaByMonthId: '',
      model: {
        // openingDate: '',
        openingText: '',
        // totalChampion: '',
        netBarChampion: '',
        totalRunnersUp: '',
        netBarRunnersUp: '',
        totalPoleBronze: '',
        netBarPoleBronze: ''
        // reviewId: ''
      },
      prizeVisible: false,
      // tableData: [],
      editId: '',
      baseSubmit: false,
      editSubmit: false
    }
  },
  watch: {
    id() {
      this.fetch()
    }
  },
  mounted() {
    this.fetch()
  },
  methods: {
    openAdd() {
      this.baseSubmit = true
      this.editSubmit = false
      this.prizeVisible = true
    },
    async handleEdit(row) {
      this.model = JSON.parse(JSON.stringify(row))
      this.editSubmit = true
      this.baseSubmit = false
      this.prizeVisible = true
      this.editId = row.id
    },
    async handleDelete(id) {
      await this.$http.deleteInformationData({ id })
      this.$message.success('删除成功')
      this.fetch()
    },
    async fetch() {
      const { data } = await this.$http.getBangdanById({
        saiquId: this.id
      })
      if (data.list) {
        this.model = data.list
      }
    },
    async confirm() {
      await this.$http.setInformationData({
        ...this.model,
        saiquId: this.id
      })
      this.$message.success('修改成功')
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.champions {
  display: flex;
  flex-direction: column;
  input {
    outline: 0;
  }
}
.el-tabs {
  height: calc(100vh - 200px);
  overflow-y: scroll;
}
::v-deep .el-dialog {
  margin-top: 5vh !important;
}
::v-deep .el-dialog__body {
  max-height: 70vh;
  overflow-y: auto;
}
</style>
